import React, { Component } from 'react';

// 导入列表组件
import List from './list';

// 导入组件样式
import './index.css'

class Index extends Component {

  // 设置状态数据
  state = {
    //  评论列表数据（假数据）
    list: [
      { id: 0, name: '特朗普', content: '我来了' },
      { id: 1, name: '普京', content: '我来也！' }
    ],
    // 设置表单状态
    name: '',// 评论人
    content: '', // 评论内容
  }

  // 处理表单事件函数（批量处理）
  handlerInput = (e) => {
    // console.log(e.target.name)
    this.setState({
      //  key:val
      [e.target.name]: e.target.value
    })
  }

  // 发表评论
  publish = () => {
    // 获取评论内容
    const { name, content, list } = this.state;
    // 判断边界
    if (!name || !content) {
      return alert('评论人或者内容不能为空！')
    }
    // 响应式：刷新列表 =》setState()
    // 不能直接修改state(push)
    let newList = [...list, { id: list.length + 1, name, content }];
    this.setState({
      list: newList,
      // 把上一次的输入清空
      name: '',
      content: ''
    })
  }


  render() {
    return (
      <div className="box">
        <h1>评论</h1>
        {/* 发表评论 */}
        <div className="pub">
          <p><input name="name" value={this.state.name} onChange={this.handlerInput} type="text" /></p>
          <p><textarea name="content" value={this.state.content} onChange={this.handlerInput} /></p>
          <p><button onClick={this.publish} className="btn">发表评论</button></p>
        </div>
        {/* 评论列表 */}
        <hr className="line" />
        {/* 子组件：列表 */}
        <List list={this.state.list} a={100000} />
      </div>
    );
  }
}

export default Index;